<template>
    <div class="container pb-5"  style="width:70%">
        <div class="d-flex justify-content-end">
            <el-button type="primary">自动分发调解</el-button>
            <el-button :icon="'Pointer'" type="primary" @click="add">手动分发调解</el-button>
            <el-button type="primary">批量申请立案</el-button>
            <el-button :icon="'View'" type="primary" @click="detail">详情(含调解过程)</el-button>
            <el-button type="primary">电子合同</el-button>
            <el-button type="primary">回款一键对账</el-button>
        </div>
        <div class="pt-3">
            <el-table :data="tableData" highlight-current-row stripe style="width: 100%">
                <el-table-column prop="no" label="批次号"/>
                <el-table-column prop="bankName" label="银行名称"/>
                <el-table-column prop="subBankName" label="分行名称" />
                <el-table-column prop="province" label="所在省份" />
                <el-table-column prop="city" label="所在城市" />
                <el-table-column prop="principal" label="债权本金" />
                <el-table-column prop="interests" label="债权利息" />
                <el-table-column prop="baseDate" label="基准日" />
                <el-table-column prop="center" label="调解中心名称" />
                <el-table-column prop="progress" label="调解进度" />
                <el-table-column prop="createTime" label="创建时间" />
            </el-table>
        </div>
    </div>
    <MyDialog 
        ref="dialog" title="手动分发调解" 
        :width="'80%'" 
        @confirm="confirm($event)" 
        :confirmName="'提交申请'"
    >
        <div
            v-loading="loading"
            :element-loading-text="'申请中，请稍等...'"
        >
            <el-form :model="form" :inline="true"  label-width="100px">
            <el-form-item label="法院">
                <el-select v-model="form.court" placeholder="请选择">
                    <el-option
                    v-for="item in courts"
                    :key="item"
                    :label="item"
                    :value="item"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="纠纷类型">
                <el-select v-model="form.type" placeholder="请选择">
                    <el-option label="交通事故纠纷" value="交通事故纠纷"/>
                    <el-option label="借款纠纷" value="借款纠纷"/>
                </el-select>
            </el-form-item>
            <el-form-item label="索赔金额">
                <el-input v-model="form.amount" placeholder="请输入索赔金额" clearable />
            </el-form-item>
            <div class="form_item mt-3">
                <div class="p-2 border-bottom bg_form_header">申请人信息</div>
                <div>
                    <el-row v-for="(item, index) in currentApplyList" class="m-2">
                        <el-col :span="6">{{ index+1 }}</el-col>
                        <el-col :span="6">{{ item.type }}</el-col>
                        <el-col :span="6">{{ item.name }}</el-col>
                        <el-col :span="6">{{ item.phone }}</el-col>
                    </el-row>
                </div>
                <div class="m-2">
                    <el-row :gutter="20">
                        <el-col :span="3" class="d-flex align-items-center justify-content-end">
                            <span>申请人{{ applyNumber }}</span>
                        </el-col>
                        <el-col :span="6">
                            <el-select class="w-100" v-model="currentApply.type" placeholder="请选择">
                                <el-option label="自然人" value="自然人"/>
                                <el-option label="法人" value="法人"/>
                            </el-select>
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="currentApply.name" placeholder="请输入申请人全名" clearable />
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="currentApply.phone" placeholder="请输入申请人的电话号码" clearable />
                        </el-col>
                        <el-col :span="3" class="d-flex align-items-center">
                            <span @click="addApply">+添加</span>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="form_item mt-3">
                <div class="p-2 border-bottom bg_form_header">被申请人信息</div>
                <div>
                    <el-row v-for="(item, index) in respondentList" class="m-2">
                        <el-col :span="6">{{ index+1 }}</el-col>
                        <el-col :span="6">{{ item.type }}</el-col>
                        <el-col :span="6">{{ item.name }}</el-col>
                        <el-col :span="6">{{ item.phone }}</el-col>
                    </el-row>
                </div>
                <div class="m-2">
                    <el-row :gutter="20">
                        <el-col :span="3" class="d-flex align-items-center justify-content-end">
                            <span >被申请人{{ respondentNumber }}</span>
                        </el-col>
                        <el-col :span="6">
                            <el-select class="w-100" v-model="currentRespondent.type" placeholder="请选择">
                                <el-option label="自然人" value="自然人"/>
                                <el-option label="法人" value="法人"/>
                            </el-select>
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="currentRespondent.name" placeholder="请输入申请人全名" clearable />
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="currentRespondent.phone" placeholder="请输入申请人的电话号码" clearable />
                        </el-col>
                        <el-col :span="3" class="d-flex align-items-center">
                            <span @click="addRespondent">+添加</span>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="form_item mt-3">
                <div class="p-2 border-bottom bg_form_header">提交证据</div>
                <div>
                    <el-row v-for="(item, index) in evidenceList" class="m-2">
                        <el-col :span="6">{{ index+1 }}</el-col>
                        <el-col :span="6">{{ item.name }}</el-col>
                        <el-col :span="6">{{ item.file }}</el-col>
                    </el-row>
                </div>
                <div class="m-2">
                    <el-row :gutter="20">
                        <el-col :span="3" class="d-flex align-items-center justify-content-end">
                            <span>证据{{ evidenceNumber }}</span>
                        </el-col>
                        <el-col :span="18">
                            <el-input v-model="currentEvidence.name" placeholder="请输入证据名称，20字以内。" clearable />
                        </el-col>
                        <el-col :span="3">
                            <span @click="addEvidence">+添加</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="3"></el-col>
                        <el-col :span="18">
                            <el-input class="pt-2" type="textarea" v-model="currentEvidence.remark" placeholder="请简单描述一下您的证据内容，不多于100字。" clearable />
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="3"></el-col>
                        <el-col :span="18">
                            <!-- 文件上传 -->
                            <FileUpload class="pt-2"
                                :autoUpload="true"
                                :methondName="'上传文件'"
                                :showFileList="false"
                                :isTip="false"
                                :plain="true"
                                @myAutoUpload="myAutoUpload"
                            />
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="form_item mt-3">
                <div class="p-2 border-bottom bg_form_header">其他信息</div>
                <div class="m-2">
                    <el-row :gutter="20">
                        <el-col :span="3" class="d-flex align-items-center justify-content-end">
                            <span>承保公司</span>
                        </el-col>
                        <el-col :span="18">
                            <el-input class="w-50" v-model="form.company" placeholder="请输入承保公司" clearable />
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="form_item mt-3">
                <div class="p-2 border-bottom bg_form_header">纠纷情况</div>
                <div class="m-2">
                    <el-input v-model="form.desc" type="textarea" placeholder="请简要描述您的纠纷，比如：请描述事发时间、地点、事情经过。"/>
                </div>
            </div>
        </el-form>
        </div>
    </MyDialog>
</template>
<script setup lang="ts">
    import { ref ,reactive, computed } from 'vue'
    import { useRouter } from "vue-router"
    import MyDialog from '@/components/MyDialog.vue'
    import FileUpload from '@/components/FileUpload.vue'
    import { ElMessage } from 'element-plus'

    const dialog = ref()
    const loading = ref(false)

    const courts = reactive([
        '深圳市中级人民法院',
        '深圳市福田区人民法院',
        '深圳市宝安区人民法院',
        '罗湖区人民法院',
        '深圳市南山区人民法院',
    ])

    const currentApplyList = reactive([])
    const respondentList = reactive([])
    const evidenceList = reactive([])
    const currentApply = reactive({
        type:'',
        name:'',
        phone:''
    })
    const currentRespondent = reactive({
        type:'',
        name:'',
        phone:''
    })
    const currentEvidence = reactive({
        name:'',
        remark:'',
        file:''
    })

    const form = reactive({
        court:'',
        type: '',
        amount:'',
        company:'',
        desc:''
    })
    const router = useRouter()
    const tableData = [
        {
            no: '23543534089483545',
            bankName: '招商银行',
            subBankName: '深圳分行',
            province:'广东省',
            city:'深圳市',
            principal:'50000000000',
            interests:'2000000',
            baseDate:'2021-10-01',
            center:'深圳法院',
            progress:'进行中',
            createTime:'2023-12-05',
        },
        {
            no: '23543534089483545',
            bankName: '招商银行',
            subBankName: '广州分行',
            province:'广东省',
            city:'广州市',
            principal:'534779082348',
            interests:'234434',
            baseDate:'2022-09-08',
            center:'广州市调解中心',
            progress:'进行中',
            createTime:'2023-11-02',
        },
        {
            no: '8098524525489',
            bankName: '建设银行',
            subBankName: '贵阳分行',
            province:'贵州省',
            city:'贵阳市',
            principal:'283928348',
            interests:'324234',
            baseDate:'2018-07-01',
            center:'贵阳市中级人民法院',
            progress:'进行中',
            createTime:'2023-11-01',
        },
        {
            no: '245435345345345',
            bankName: '光大银行',
            subBankName: '遵义分行',
            province:'贵州省',
            city:'遵义市',
            principal:'324832948234',
            interests:'234234',
            baseDate:'2022-02-24',
            center:'遵义市中级人民法院',
            progress:'进行中',
            createTime:'2023-10-05',
        },
        {
            no: '42782793279473324',
            bankName: '上海银行',
            subBankName: '浦东分行',
            province:'上海市',
            city:'上海市',
            principal:'3875345878',
            interests:'242342',
            baseDate:'2021-01-01',
            center:'浦东调解中心',
            progress:'已完成',
            createTime:'2023-09-05',
        },
        {
            no: '63543646346565',
            bankName: '招商银行',
            subBankName: '深圳分行',
            province:'广东省',
            city:'深圳市',
            principal:'50000000000',
            interests:'2000000',
            baseDate:'2018-08-08',
            center:'深圳法院',
            progress:'已完成',
            createTime:'2023-08-05',
        },
    ]
    const detail = () => {
        router.push('/bi_frontend/personalLoand/detail')
    }
    const add = () => {
        dialog.value.openDialog()
    }
    const addApply = () => {
        if (!currentApply.type) {
            ElMessage.error('请先选择申请人类型');  
            return false
        }
        if (!currentApply.name) {
            ElMessage.error('请先输入申请人名称');  
            return false
        }
        if (!currentApply.phone) {
            ElMessage.error('请先输入申请人手机号');  
            return false
        }
        // 开辟一个新的内存空间来保存
        let apply = {}
        apply.type = currentApply.type
        apply.name = currentApply.name
        apply.phone = currentApply.phone
        // 添加当前申请人到集合中
        currentApplyList.push(apply)
        // 清空当前申请人
        currentApply.type=''
        currentApply.name=''
        currentApply.phone=''
    }
    const addRespondent = () => {
        if (!currentRespondent.type) {
            ElMessage.error('请先选择被申请人类型');  
            return false
        }
        if (!currentRespondent.name) {
            ElMessage.error('请先输入被申请人名称');  
            return false
        }
        if (!currentRespondent.phone) {
            ElMessage.error('请先输入被申请人手机号');  
            return false
        }
        // 开辟一个新的内存空间来保存
        let respondent = {}
        respondent.type = currentRespondent.type
        respondent.name = currentRespondent.name
        respondent.phone = currentRespondent.phone
        // 添加当前申请人到集合中
        respondentList.push(respondent)
        // 清空当前申请人
        currentRespondent.type=''
        currentRespondent.name=''
        currentRespondent.phone=''
    }
    const addEvidence = () => {
        if (!currentEvidence.name) {
            ElMessage.error('请先输入证据名称');  
            return false
        }
        if (!currentEvidence.remark) {
            ElMessage.error('请先输入证据描述');  
            return false
        }
        if (!currentEvidence.file) {
            ElMessage.error('请先上传证据文件');  
            return false
        }
        // 开辟一个新的内存空间来保存
        let evidence = {}
        evidence.name = currentEvidence.name
        evidence.remark = currentEvidence.remark
        evidence.file = currentEvidence.file
        // 添加当前申请人到集合中
        evidenceList.push(evidence)
        // 清空当前申请人
        currentEvidence.name=''
        currentEvidence.remark=''
        currentEvidence.file=''
    }
    const myAutoUpload = (fileList) => {
        currentEvidence.file = fileList.value[0].name
    }
    const confirm = (e) => {
        if(!form.court) {
            ElMessage.error('请先选择法院');  
            return false
        }
        if(!form.type) {
            ElMessage.error('请先选择纠纷类型');  
            return false
        }
        if(!form.amount) {
            ElMessage.error('请先输入索赔金额');  
            return false
        }
        if(currentApplyList.length < 1) {
            ElMessage.error('请先至少录入一个申请人');  
            return false
        }
        if(respondentList.length < 1) {
            ElMessage.error('请先至少录入一个被申请人');  
            return false
        }
        if(evidenceList.length < 1) {
            ElMessage.error('请先至少录入一条证据');  
            return false
        }
        if(!form.company) {
            ElMessage.error('请先输入承保公司');  
            return false
        }
        if(!form.desc) {
            ElMessage.error('请先输入纠纷情况');  
            return false
        }
        loading.value = true
        setTimeout(() => {
            loading.value = false
            clear()
            e.callback(true)
            ElMessage.success('申请成功')
        }, 2000);
    }
    const clear = () => {
        form.court = ''
        form.type = ''
        form.amount = ''
        form.company = ''
        form.desc = ''
        currentApplyList.splice(0, currentApplyList.length);
        respondentList.splice(0, respondentList.length);
        evidenceList.splice(0, evidenceList.length);
    }
    const applyNumber = computed(() => {
        return currentApplyList.length + 1;
    })
    const respondentNumber = computed(() => {
        return respondentList.length + 1;
    })
    const evidenceNumber = computed(() => {
        return evidenceList.length + 1;
    })
</script>
<style scoped>
    .el-button {
        background-color: rgb(68, 114, 196);
    }
    .bg_form_header {
        background: #F5F7FA;
        border-radius: 10px 10px 0px 0px;
    }
    .form_item {
        border:1px solid #dee2e6;
        border-radius: 10px;
    }
</style>